<template>
  <div class='question-preview-container'>
    <el-row >
      <el-col :span="6">【题型】:{{formatQuestionType(detail.questionType)}}题</el-col>
      <el-col :span="6">【编号】:{{detail.id}}</el-col>
      <el-col :span="6">【难度】:{{formatDifficulty(detail.difficulty)}}</el-col>
      <el-col :span="6">【标签】:{{detail.tags}}</el-col>
      <el-col :span="6">【学科】:{{detail.subjectName}}</el-col>
      <el-col :span="6">【目录】:{{detail.catalogID}}</el-col>
      <el-col :span="6">【方向】:{{detail.direction}}</el-col>
    </el-row>
    <hr/>
    【题干】
    <div class="question" v-html="detail.question"></div>
    <div class="select">
      <div>{{formatQuestionType(detail.questionType) }}题选项：(以下选中的选项为正确答案)</div>
      <el-radio-group v-model="code" v-if="detail.questionType==='1'">
      <div v-for="item in detail.options" :key="item.id"><el-radio  :label="item.code"  @click.stop.native.prevent>{{item.title}}</el-radio></div>
      </el-radio-group>
      <el-checkbox-group v-model="code" v-else-if="detail.questionType==='2'">
        <div v-for="item in detail.options" :key="item.id"> <el-checkbox :label="item.code" @click.stop.native.prevent >{{item.title}}</el-checkbox></div>
      </el-checkbox-group>
      <div v-else>

      </div>
    </div>
    <hr/>
    【参考答案】: <el-button  type="danger" @click="showVideo=true">视频答案预览</el-button>
    <div class="video" v-if="showVideo"><video :src="detail.videoURL" controls width="400px" height="300px"></video></div>
     <hr/>
     【答案解析】: <div style="display: inline-block;" v-html="detail.answer"></div>
     <hr/>
     【题目备注】: {{detail. remarks}}
  </div>
</template>

<script>
import * as questions from '@/api/hmmm/questions.js'
import { difficulty, questionType } from '@/api/hmmm/constants.js'
import * as directorys from '@/api/hmmm/directorys.js'
const difficultyMnus = {}
difficulty.forEach(item => {
  difficultyMnus[item.value] = item.label
})
const questionTypeMnus = {}
questionType.forEach(item => {
  questionTypeMnus[item.value] = item.label
})
export default {
  props: {
    curId: {
      required: true
    }
  },
  created () {
    this.loadQeustionDetail()
  },
  methods: {
    async loadQeustionDetail () {
      const res = await questions.detail({ id: this.curId })
      if (res.status === 200) {
        console.log(res.data)
        this.detail = res.data
        const catalogList = await directorys.list()
        const directory = {}
        catalogList.data.items.forEach(item => {
          const { id, directoryName } = item
          directory[id] = directoryName
        })
        this.detail.catalogID = directory[this.detail.catalogID]
        if (this.detail.questionType === '1') {
          const isRight = this.detail.options.find(item => item.isRight)
          this.code = isRight.code
        } else if (this.detail.questionType === '2') {
          this.code = this.detail.options.filter(item => item.isRight).map(item => item.code)
        }
      }
    },
    formatDifficulty (id) {
      return difficultyMnus[id] || '未知'
    },
    formatQuestionType (id) {
      return questionTypeMnus[id] || '未知'
    }

  },
  data () {
    return {
      detail: {},
      code: 'A',
      showVideo: false
    }
  }

}
</script>

<style scoped lang='less'>
.question-preview-container{
  .el-col{
    padding: 10px 0 ;
  }
  .question{
    color: blue;
    margin: 14px 0;
  }
  .select{
    div{
      padding: 8px 0;
    }
  }
  .video{
    width: 400px;
    height: 300px;
  }
}
</style>
